<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="home/layout::html-head(pageTitle='修改密码 | ' + ${titleSuffix},pageKey=${pageKey},pageDesc=${pageDesc})" />
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
    <body class="layout-top-nav skin-black-light">
        <div class="wrapper">
            <header class="main-header" th:include="home/layout::main-header">
            </header>
            <!-- Full Width Column -->
            <div class="content-wrapper">
                <div class="container">
                    <!-- Main content -->
                    <section class="content">
                        <!-- /.box -->
                        <div class="col-md-3">

                            <!-- Profile Image -->
                            <div class="box box-primary">
                                <div class="box-body box-profile">
                                    <img class="profile-user-img img-responsive img-circle" th:src="${@UserService.getCurrentUser(#httpServletRequest).getAvatar()}" alt="User profile picture">

                                    <h3 class="profile-username text-center" th:text="${@UserService.getCurrentUser(#httpServletRequest).getNickname()}"></h3>

                                    <p class="text-muted text-center" th:text="${@UserService.getCurrentUser(#httpServletRequest).getIntroduction()}"></p>

                                    <ul class="list-group list-group-unbordered">
                                        <li class="list-group-item">
                                            <b>关注者</b> <a class="pull-right">1,322</a>
                                        </li>
                                        <li class="list-group-item">
                                            <b>讨论</b> <a class="pull-right">543</a>
                                        </li>
                                        <li class="list-group-item">
                                            <b>文章</b> <a class="pull-right">13,287</a>
                                        </li>
                                    </ul>

                                    <a th:href="@{/user}" class="btn btn-primary btn-block"><i class="fa fa-edit"></i><b>编辑个人资料</b></a>
                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box -->

                            <!-- About Me Box -->
                            <div class="box box-primary">
                                <div class="box-header with-border">
                                    <h3 class="box-title">About Me</h3>
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body">
                                    <p>
                                        <span class="label label-danger"><a th:href="|https://github.com/| + ${@UserService.getCurrentUser(#httpServletRequest).getGithubName()}" style="color:white;" data-toggle="tooltip"  th:title="${@UserService.getCurrentUser(#httpServletRequest).getGithubName()}">GitHub</a></span>
                                        <span class="label label-success" data-toggle="tooltip" th:title="${@UserService.getCurrentUser(#httpServletRequest).getCity()}">所在地</span>
                                        <span class="label label-info" data-toggle="tooltip" th:title="${@UserService.getCurrentUser(#httpServletRequest).getCompany()}">公司</span>
                                    </p>
                                    <hr>
                                    <strong><i class="text-md fa fa-headphones"></i> <a th:class="|rm-link-color margin-left|">Ta发布的文章</a></strong>
                                    <hr>

                                    <strong><i class="text-md fa fa-list-ul"></i> <a th:class="|rm-link-color margin-left|">Ta发布的话题</a></strong>
                                    <hr>

                                    <strong><i class="text-md fa fa-comment"></i> <a th:class="|rm-link-color margin-left|">Ta发表的回复</a></strong>
                                    <hr>

                                    <strong><i class="text-md fa fa-eye"></i> <a th:class="|rm-link-color margin-left|">Ta关注的用户</a></strong>
                                    <hr>

                                    <strong><i class="text-md fa fa-thumbs-up"></i> <a th:class="|rm-link-color margin-left|">Ta赞过的话题</a></strong>
                                    <hr>

                                    <strong><i class="text-md fa fa-tripadvisor"></i> <a th:class="|rm-link-color margin-left|">Ta参与的翻译</a></strong>
                                    <hr>

                                    <!--<strong><i class="fa fa-file-text-o margin-r-5"></i> Notes</strong>-->
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.</p>
                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box -->
                        </div>

                        <div class="col-md-9" id="app-profile">
                            <div th:class="|panel panel-default|">
                                <div class="panel-heading text-center">
                                    <i class="text-md fa fa-leaf"></i> 发表过的专栏文章
                                </div>
                                <div class="panel-body">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <a href="https://laravel-china.org/articles/4639/a-little-chicken-soup" title="一点点鸡汤句子" class="rm-link-color">
                                                一点点鸡汤句子
                                            </a>
                                            <span class="meta pull-right">
                                                <a th:class="|rm-link-color|" href="https://laravel-china.org/inspiration" title="随笔感悟">
                                                  随笔感悟
                                                </a>
                                                <span> ⋅ </span>
                                                5 点赞
                                                <span> ⋅ </span>
                                                0 回复
                                                <span> ⋅ </span>
                                                <span class="timeago">10个月前</span>
                                            </span>
                                        </li>
                                    </ul>

                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading text-center">
                                    <i class="fa fa-map-signs" aria-hidden="true"></i> 最近发表的话题
                                </div>

                                <div class="panel-body">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <a href="https://laravel-china.org/topics/5554/running-phpunit-error-reporting-under-windows" title="Windows 下 运行 phpunit 报错问题，如何解决？" class="title  rm-link-color">
                                                Windows 下 运行 phpunit 报错问题，如何解决？
                                            </a>

                                            <span class="meta pull-right">
                                                <a href="" title="问答" th:class="|rm-link-color|">问答</a>
                                                <span> ⋅ </span>0 点赞
                                                <span> ⋅ </span>0 回复
                                                <span> ⋅ </span><span class="timeago">7个月前</span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading text-center">
                                    <i class="fa fa-comments" aria-hidden="true"></i> 最近发表的评论
                                </div>

                                <div class="panel-body">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <a href="" title="项目做到一半，被老板外包出去了，我看了一下外包程序员的写的代码，我认为把他枪毙五分钟不为过吧" class="remove-padding-left  rm-link-color">
                                                项目做到一半，被老板外包出去了，我看了一下外包程序员的写的代码，我认为把他枪毙五分钟不为过吧
                                            </a>
                                            <span th:class="|meta text-muted|">at<span class="timeago" title="1个月前">1个月前</span></span>
                                            <div class="reply-body markdown-reply content-body">
                                                <p>至于说没有做验证什么的，这些都是小事情，只要代码业务逻辑分清楚了，等到时间空下来再把验证不上去都可以，这真不是大问题。毕竟是外包项目。</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <th:block th:include="home/layout::modal" />
                        </div>
                    </section>
                    <!-- /.content -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /.content-wrapper -->
            <footer class="main-footer" th:include="home/layout::main-footer" />
        </div>
        <!-- ./wrapper -->
        <th:block th:include="home/layout::main-script" />

        <script>
            var appProfile = new Vue({
                el:'#app-profile',
                data () {
                    return {
                        form:{
                            field:{
                                password:'',
                                confirmPassword:''
                            },
                            error:{
                                password:'',
                                confirmPassword:''
                            }
                        },
                        dialogTitle:'',
                        dialogContent:'',
                        isSuccess:true,
                        hasError:''
                    }
                },
                created() {
                    this.getData();
                },
                methods:{
                    getData() {
                        var _this = this;

                        $.post('/user/getData',null,function(response) {
                            _this.form.field = response
                        },'json',_this);
                    },
                    submitForm() {
                        var _this = this;
                        if (!_this.form.field.password) {
                            _this.form.error.password = '请输入密码';
                            return false;
                        } else {
                            _this.form.error.password = '';
                        }
                        if (!_this.form.field.confirmPassword) {
                            _this.form.error.confirmPassword = '请输入确认密码';
                            return false;
                        } else {
                            _this.form.error.password = '';
                        }
                        if (_this.form.field.password !== _this.form.field.confirmPassword) {
                            _this.form.error.confirmPassword = '两次密码输入不一致';
                            return false;
                        } else {
                            _this.form.error.confirmPassword = '';
                        }
                        $.post('/user/edit',this.form.field,function(response) {
                            if (response.status === true) {
                                _this.dialogTitle = "修改密码";
                                _this.dialogContent = "密码修改成功";
                                $('#dialogTip').modal({
                                    keyboard: true
                                })
                            } else {
                                _this.dialogTitle = "修改用户信息";
                                _this.dialogContent = response.content;
                                $('#dialogTip').modal({
                                    keyboard: true
                                })
                            }
                        },'json',_this);

                    },

                }
            });


        </script>
    </body>
</html>
